React Flight

from

How React server components work: an in-depth guide

https://zenn.dev/akfm/articles/next-app-router-navigation#react-flight

prefetchアクションによって作成されるこのPromiseの実態は、ReturnType<typeof fetchServerResponse>の通りサーバーへのfetchであり、前述の通りページURLにRSC: 1などいくつかのヘッダーを含めたGETリクエストです。このServer ComponentsのGETリクエストのレスポンスボディは、FlightやReact Flightと呼ばれる独自のデータフォーマットで表現されます。

仕様

https://github.com/facebook/react/blob/aef7ce5547c9489dc48e31f69b002cd17206e0cb/packages/react-server/src/ReactFlightServerConfigStream.js

code:.ts

FLIGHT PROTOCOL GRAMMAR

Response

- RowSequence

RowSequence

- Row RowSequence

- Row

Row

- "J" RowID JSONData

- "M" RowID JSONModuleData

- "H" RowID HTMLData

- "B" RowID BlobData

- "U" RowID URLData

- "E" RowID ErrorData

RowID

- HexDigits ":"

HexDigits

- HexDigit HexDigits

- HexDigit

HexDigit

- 0-F

URLData

- (UTF8 encoded URL) "\n"

ErrorData

- (UTF8 encoded JSON: {message: "...", stack: "..."}) "\n"

JSONData

- (UTF8 encoded JSON) "\n"

- String values that begin with $ are escaped with a "$" prefix.

- References to other rows are encoding as JSONReference strings.

JSONReference

- "$" HexDigits

HTMLData

- ByteSize (UTF8 encoded HTML)

BlobData

- ByteSize (Binary Data)

ByteSize

- (unsigned 32-bit integer)